<template>
	<div class="w-full">
		<el-form :inline="true" :model="formInline">
			<el-form-item label="问题">
				<el-input
					v-model="formInline.question"
					placeholder="问题"
					clearable
				></el-input>
			</el-form-item>
			<el-form-item label="答案">
				<el-input
					v-model="formInline.answer"
					placeholder="答案"
					clearable
				></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="renderData()">查询</el-button>
				<el-button type="success" @click="openDialog()">新增</el-button>
				<el-button type="danger" @click="deleteHandle()">批量删除</el-button>
			</el-form-item>
		</el-form>
		<el-table
			:data="tableData"
			v-loading="dataListLoading"
			@selection-change="selectionChangeHandle"
			style="width: 100%"
		>
			<el-table-column
				type="selection"
				header-align="center"
				align="center"
				width="50"
			>
			</el-table-column>
			<el-table-column prop="question" label="问题"> </el-table-column>
			<el-table-column prop="answer" label="回答"> </el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template #default="scope">
					<el-button
						link
						type="warning"
						size="small"
						@click="openDialog(scope.row)"
						>修改</el-button
					>
					<el-button
						link
						type="danger"
						size="small"
						@click="deleteHandle(scope.row.id)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-affix position="bottom" :offset="60" class="mt-4">
			<el-pagination
				class="mt-2"
				size="small"
				v-model:current-page="formInline.current"
				v-model:page-size="formInline.size"
				:page-sizes="[15, 20, 50, 100]"
				:background="true"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				@size-change="renderData"
				@current-change="renderData"
			/>
		</el-affix>
	</div>
	<el-dialog
		title="添加或修改"
		v-model="dialogFormVisible"
		:width="dialogWidth"
	>
		<el-form :model="formDialog" label-position="top" ref="formRef">
			<el-form-item label="问题">
				<el-input type="textarea" v-model="formDialog.question"></el-input>
			</el-form-item>
			<el-form-item label="回答">
				<el-input type="textarea" v-model="formDialog.answer"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button
					type="primary"
					@click="addOrUpdateHandle"
					:loading="!dialogFormVisible"
					:loading-icon="loading"
					>确 定</el-button
				>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
	const tableData = ref([]);
	const current = ref(1);
	const size = ref(15);
	const total = ref(0);
	const formInline = ref({
		current: current.value,
		size: size.value,
		answer: "",
		question: "",
	});

	const formDialog = reactive({
		id: "",
		answer: "",
		question: "",
	});
	const formRef = ref(null);
	const dataListLoading = ref(false);
	const dataListSelections = ref([]);
	const dialogFormVisible = ref(false);

	const dialogWidth = ref("300px");
	//挂载页面
	onMounted(() => {
		renderData();
		window.addEventListener("resize", resizeWindow(dialogWidth));
	});
	// 获取数据列表
	const renderData = () => {
		dataListLoading.value = true;
		pageQa(formInline.value).then((res) => {
			tableData.value = [];
			if (res.value.error === 0) {
				current.value = res.value.data.current;
				total.value = res.value.data.total;
				tableData.value = res.value.data.records;
			}
			dataListLoading.value = false;
		});
	};
	// 多选
	const selectionChangeHandle = (val) => {
		dataListSelections.value = val;
	};

	const openDialog = (row) => {
		dialogFormVisible.value = true;
		if (row) {
			//update
			formDialog.id = row.id;
			formDialog.answer = row.answer;
			formDialog.question = row.question;
		} else {
			//add
			formDialog.id = "";
			formDialog.answer = "";
			formDialog.question = "";
		}
	};
	// 新增 / 修改
	const addOrUpdateHandle = (row) => {
		saveQa(formDialog).then(async (res) => {
			if (res.value.error === 0) {
				ElMessage.success("操作成功");
				dialogFormVisible.value = false;
				renderData();
			} else {
				ElMessage.error("操作失败");
			}
		});
	};
	// 删除
	const deleteHandle = (id) => {
		var ids = id
			? [id]
			: dataListSelections.value.map((item) => {
					return item.id;
			  });
		ElMessageBox.confirm(
			`确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
			"提示",
			{
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}
		).then(() => {
			deleteQa({ ids: ids }).then(async (res) => {
				if (res.value.error === 0) {
					ElMessage.success("删除成功");
					renderData();
				} else {
					ElMessage.error("删除失败");
				}
			});
		});
	};
</script>